<template>
<div>
  <!--  搜索框-->
  <el-form :inline="true" :model="formInline" ref="formInline" style="padding-top: 30px">
    <el-form-item label="导航标题">
      <el-input v-model="formInline.headName" placeholder="导航标题"></el-input>
    </el-form-item>
    <el-form-item label="状态">
      <el-select v-model="formInline.status" placeholder="状态">
        <el-option label="正常" value="0"></el-option>
        <el-option label="禁用" value="1"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit"><i class="el-icon-search"></i>查询</el-button>
      <el-button type="primary" @click="Reset"><i class="el-icon-refresh"></i>重置</el-button>
      <el-button type="primary" @click="inserts"><i class="el-icon-refresh"></i>添加</el-button>
    </el-form-item>
  </el-form>

<!--修改-->
  <el-dialog title="修改信息"  :visible.sync="upformstatus" width="80%">
    <el-form ref="upform" :rules="uprules"  :model="upform"  >
      <el-form-item label="id" prop="headId"  style="display: none" >
        <el-input v-model="upform.headId" placeholder="id"></el-input>
      </el-form-item>
      <el-form-item label="导航标题" prop="headName">
        <el-input v-model="upform.headName" placeholder="导航标题" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="跳转路径" prop="href">
        <el-input v-model="upform.href" placeholder="跳转路径" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="打开方式" prop="headImgUrl">
        <el-radio v-model="upform.headImgUrl" label="同窗口跳转">同窗口跳转</el-radio>
        <el-radio v-model="upform.headImgUrl" label="新窗口跳转">新窗口跳转</el-radio>
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-input v-model="upform.sort" placeholder="排序" style="width: 80%"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
                        <el-button @click="upquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="upsaveupForm" >确 定</el-button>
                    </span>
  </el-dialog>

  <!--新增-->
  <el-dialog title="新增"  :visible.sync="informstatus" width="80%">
    <el-form ref="inform" :rules="inrules" :model="inform"  >
      <el-form-item label="导航标题" prop="headName">
        <el-input v-model="inform.headName" placeholder="导航标题" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="跳转路径" prop="href">
        <el-input v-model="inform.href" placeholder="跳转路径" style="width: 80%"></el-input>
      </el-form-item>
      <el-form-item label="打开方式" prop="headImgUrl">
        <el-radio v-model="inform.headImgUrl" label="同窗口跳转">同窗口跳转</el-radio>
        <el-radio v-model="inform.headImgUrl" label="新窗口跳转">新窗口跳转</el-radio>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer">
                        <el-button @click="inquxiaoup">取 消</el-button>
                        <el-button type="primary" @click="insaveupForm" >确 定</el-button>
                    </span>
  </el-dialog>
<!--  //表格-->
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        fixed
        prop="headId"
        label="序号">
    </el-table-column>
    <el-table-column
        prop="headName"
        label="导航标题">
    </el-table-column>
    <el-table-column
        prop="headImgUrl"
        label="跳转方式">
    </el-table-column>
    <el-table-column
        prop="sort"
        label="排序">
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
      <template slot-scope="scope">
        <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            :active-value="0"
            :inactive-value="1"
            active-text="启用"
            inactive-text="禁用"
            @change="changeStatus(scope.row.headId,scope.row.status)"
            inactive-color="#ff4949">
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
        fixed="right"
        label="操作">
      <template slot-scope="scope">

        <el-button @click="handleClick(scope.row)" type="danger" size="small">删除</el-button>
        <el-button type="primary" size="small" @click="fenchengClick(scope.row)">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!--  分页-->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5,10,15]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
  </el-pagination>
</div>
</template>

<script>
export default {
  name: "topdaohang",
  data(){
    return {
      //搜索框对象
      formInline:{},
      //表个对象
      tableData:[],
      //分页
      currentPage:1,
      pageSize:5,
      total:0,
      //修改框状态
      upformstatus:false,
      //修改框对象
      upform:{},

      //新增框状态
      informstatus:false,
      //新增对象
      inform:{},
      inrules:{
        headName:[
          { required: true, message: '请输入导航标题', trigger: 'blur' },
        ],
        headImgUrl:[
          { required: true, message: '请选择打开方式', trigger: 'blur' },
        ],
        href:[
          { required: true, message: '请填写跳转路径', trigger: 'blur' },
        ]
      },
      uprules:{
        headName:[
          { required: true, message: '请输入导航标题', trigger: 'blur' },
        ],
        href:[
          { required: true, message: '请填写跳转路径', trigger: 'blur' },
        ],
        headImgUrl:[
          { required: true, message: '请选择打开方式', trigger: 'blur' },
        ],
        sort:[
          { required: true, message: '请选择排序', trigger: 'blur' },
        ]
      },

    }
  },
  created() {
    this.init();
  },
  methods:{

    init(){
      var that = this;
      this.$http.post('/home/head-nav/getAllHeadNav/'+this.currentPage+"/"+this.pageSize,this.formInline).then(function (resp){
        that.tableData=resp.data.result.records
        that.total=resp.data.result.total
      })
    },
    //分页改变
    handleSizeChange(val) {
      this.pageSize=val;
      this.init();
    },
    handleCurrentChange(val) {
      this.currentPage=val;
      this.init();
    },
    //搜索=======================================================
    //查询按钮
    onSubmit(){
      this.init();
    },

    //重置按钮
    Reset(){
      this.$refs.formInline.resetFields();
      this.formInline={}
    },
    //新增
    inserts(){
      this.informstatus=true;
    },

    //表格方法============================================================
    //删除
    handleClick(item){
      var that = this
      this.$http.get("/home/head-nav/deleteById?headId="+item.headId).then(function (resp){
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改
    fenchengClick(item){
      // console.log(item)
      this.upform=item;
      this.upformstatus=true
    },
    //修改状态
    changeStatus(id,status){
      var that = this;
      this.$http.get('/home/head-nav/updateHeadNavStatus?headId='+id+"&status="+status).then(function (resp) {
        if(resp.data.code==200){
          that.init()
        }
      })
    },
    //修改取消
    upquxiaoup(){
      this.upformstatus=false;
      this.upform={};
      this.$refs.upform.resetFields();
    },
    //修改确认
    upsaveupForm(){
      var that = this;
      this.$refs.upform.validate((valid) => {
        if (valid) {
          this.$http.post(`/home/head-nav/updateHeadNavById`,this.upform).then(function (resp){
            if(resp.data.code==200){
              that.init()
              that.upformstatus=false;
              that.upform={};
              that.$refs.upform.resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
    //新增====================================================
    inquxiaoup(){
      this.informstatus=false;
      this.$refs.inform.resetFields();
      this.inform={};
    },
    insaveupForm(){
      var that = this;
      this.$refs.inform.validate((valid) => {
        if (valid) {
          this.$http.post(`/home/head-nav/insertHeadNav`,this.inform).then(function (resp){
            if(resp.data.code==200){
              that.init()
              that.informstatus=false;
              that.inform={};
              that.$refs.inform.resetFields();
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },

  }
}
</script>

<style scoped>

</style>